Lesson 3: An html form with data

In this lesson, we will create a form in which you can enter your name. For example, if you enter "Bob" and click the submit button,
you'll get a page saying "Hello, Bob!". If you don't enter a name, you'll get a screen saying: "Hmm, you don't seem to have entered a name. Go back and try again please."

As before, we set everything up in four steps: create the form, create the action, register the action, and create the landing page (or in this case, pages).

1. Create the form

Paste this html into [webapp]/page03.jsp:

<html>
<head>
	<title>A simple form with data</title>
</head>
<body>
	<p>What is your name?</p>

	<form action="form03.action" method="post">
		<p><input type="text" name="yourName"></p>
		<p><input type="submit" value="Submit your name." /></p>
	</form>

</body>
</html>

2. Create the form action

Paste this code into [src]/lessons/Form03Action.java:

package lessons;

import com.opensymphony.xwork.ActionSupport;

public class Form03Action extends ActionSupport {

  String yourName;

  public void setYourName(String p_yourName) {
    yourName = p_yourName;
  }

  public String getYourName() {
    return yourName;
  }


  public String execute() throws Exception {
    if (yourName == null || yourName.length() == 0)
      return ERROR;
    else
      return SUCCESS;
  }

}

3. Register the action in xwork.xml:

Edit [webapp]/WEB-INF/classes/xwork.xml:

<!DOCTYPE xwork PUBLIC "-//OpenSymphony Group//XWork 1.0//EN"
"http://www.opensymphony.com/xwork/xwork-1.0.dtd">

<xwork>
  <!-- Include webwork defaults (from WebWork JAR). -->
  <include file="webwork-default.xml" />
  
  <!-- Configuration for the default package. -->
  <package name="default" extends="webwork-default">
    <!-- Default interceptor stack. --> 
    <default-interceptor-ref name="defaultStack" /> 
    
    <!-- 02 --> 
    <action name="form02" class="lessons.Form02Action"> 
      <result name="success" type="dispatcher">page02-success.jsp</result> 
    </action> 

    <!-- 03 -->
    <action name="form03" class="lessons.Form03Action">
      <result name="success" type="dispatcher">page03-success.jsp</result>
      <result name="error" type="dispatcher">page03-error.jsp</result>
    </action>

  </package>
</xwork>

4. Create the success and error pages

Create [webapp]/page03-success.jsp:

<%@ taglib uri="webwork" prefix="ww" %>
<html>
<head>
	<title>Success page for form with data</title>
</head>
<body>

Hello, <ww:property value="yourName" />!

</body>
</html>

Create [webapp]/page03-error.jsp:

<html>
<head>
	<title>Error page for form with data</title>
</head>
<body>

Hmm, you don't seem to have entered a name. Go back and try again please.

</body>
</html>

Try it

Don't forget to compile your action to [webapp]/WEB-INF/classes, and to restart your web application if necessary.

Go ahead and try it now: click the form submit button and see what happens. Try it with and without entering a name.

How the code works

There are only two differences between this example and the previous lesson.

When the action is called, its setYourName() setter is called with the contents of the form field named yourName.
After the action has been called (which is when its execute() method returns), WebWork has two options. If ERROR is returned, WebWork will return page03-error.jsp; if SUCCESS, page03-success.jsp. Just as in the last lesson, the <ww:property> tag calls the action's getter (in this case, getYourName()).

Lesson 2 - An html form with no data | Lesson 4 - An html form with data, without getters or setters